<template>
  <!-- 原参照关系弹框 -->
  <el-dialog
    :visible.sync="originalReferenceVisible"
    :modal-append-to-body="false"
    :center="true"
    width="55%"
    @close="handleCloseDialog"
  >
    <el-table
      :data="tableData"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      border="border"
      use-virtual
    >
      <template v-for="column in columns">
        <el-table-column
          :key="column.key"
          :prop="column.key"
          :label="column.title"
          :property="column.key"
          :align="column.align"
          :min-width="column.width || 120"
          :fixed="column.fixed"
          :formatter="column.formatter"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
      </template>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCloseDialog">返回</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { ApiRequest } from '@api/basePage'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    originalParams: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      originalReferenceVisible: this.visible,
      tableData: [],
      tableLoading: false
    }
  },
  watch: {
    visible (newValue) {
      this.originalReferenceVisible = newValue
      if (newValue) { this.getOriginalReferenceData() }
    },
  },
  methods: {
    getOriginalReferenceData () {
      let { params, url, type } = this.originalParams
      this.tableLoading = true
      ApiRequest(url, type, params, true).then(res => {
        this.tableLoading = false
        if (res.retStatus !== '1') { return }
        this.tableData = res.retData
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleCloseDialog () {
      this.originalReferenceVisible = false
      this.$emit('update:visible', this.originalReferenceVisible)
    },
  }
}
</script>
